<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" content="填报" />
        <div class="options">
          <el-button @click="goBack"> 取 消</el-button>
          <el-button
            type="primary"
            @click="dataFormSubmit('0')"
            v-if="!isDetail"
            :loading="btnLoading"
          >
            暂 存</el-button
          >
          <el-button
            type="primary"
            @click="dataFormSubmit('1')"
            :loading="btnLoading"
            v-if="!isDetail"
          >
            提 交</el-button
          >
        </div>
      </div>
      <el-row
        :gutter="24"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-col :span="24">
          <div style="text-align: center">
            <h1>{{ orderName }}</h1>
          </div>
        </el-col>
        <el-col :span="24">
          <div style="text-align: center; width: 100%">
            <el-card
              v-for="(item, i) in dataForm"
              :key="i"
              style="
                margin-top: 5px;
                width: 800px;
                margin-left: auto;
                margin-right: auto;
              "
            >
              <el-form
                label-width="120px"
                label-position="right"
                class="centered-form"
              >
                <!-- <el-col :span="18">
                  <div style="display: flex; align-items: center;">
                    <span v-if="item.isRequired == '1'" style="color:red;">*</span>
                    <el-form-item :label="`${i + 1}. 调查项类型:`" style="margin-left: 5px; margin-bottom: 0;">
                      <el-radio-group v-model="item.itemType" disabled size="small">
                        <el-radio label="radio">单选</el-radio>
                        <el-radio label="multiSelect">多选</el-radio>
                        <el-radio label="writing">填报</el-radio>
                        <el-radio label="scoring">打分</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                </el-col> -->
                <el-col :span="18">
                  <el-form-item :label="`${i + 1}.`">
                    <el-input v-model="item.itemName" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="18" style="margin-left: 200px">
                  <div v-if="item.itemType == 'radio'">
                    <el-radio-group
                      v-model="item.itemResult"
                      class="vertical-radio-group"
                    >
                      <el-radio
                        :label="item"
                        :key="item"
                        v-for="item in item.questionItem"
                        >{{ item }}</el-radio
                      >
                    </el-radio-group>
                  </div>
                </el-col>
                <el-col :span="18" style="margin-left: 200px">
                  <div v-if="item.itemType == 'multiSelect'">
                    <el-checkbox-group
                      v-model="item.itemResult"
                      class="vertical-radio-group"
                    >
                      <el-checkbox
                        :label="item"
                        :key="item"
                        v-for="item in item.questionItem"
                        >{{ item }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>
                </el-col>
                <el-col :span="18">
                  <div v-if="item.itemType == 'writing'">
                    <el-form-item label="">
                      <el-input
                        v-model="item.itemResult"
                        placeholder="请输入"
                        :style="{ width: '100%' }"
                        true
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 4 }"
                        maxlength="225"
                        show-word-limit
                      >
                      </el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="18">
                  <div v-if="item.itemType == 'scoring'">
                    <el-form-item label="">
                      <el-rate
                        v-model="item.itemResult"
                        class="custom-rate"
                      ></el-rate>
                    </el-form-item>
                  </div>
                </el-col>
              </el-form>
            </el-card>
          </div>
        </el-col>
      </el-row>

      <!-- <jsbos-table :data="dataForm" :rules="rules" style="height: auto">
        <el-table-column prop="itemName" width="300px" label="题目" align="center" />
        <el-table-column prop="itemType" width="100px" label="类型" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.itemType == 'radio'"> 单选 </el-tag>
            <el-tag v-if="scope.row.itemType == 'multiSelect'">多选 </el-tag>
            <el-tag v-if="scope.row.itemType == 'scoring'">打分 </el-tag>
            <el-tag v-if="scope.row.itemType == 'writing'">填报</el-tag>
          </template>
</el-table-column>
<el-table-column prop="questionItem" width="450px" label="填写" align="center">
  <template slot-scope="scope">
            <div v-if="scope.row.itemType == 'radio'">
              <el-radio-group v-model="scope.row.itemResult">
                <el-radio-button :label="item" :key="item" v-for="item in scope.row.questionItem">{{ item
                  }}</el-radio-button>
              </el-radio-group>
            </div>
            <div v-if="scope.row.itemType == 'multiSelect'">
              <el-checkbox-group v-model="scope.row.itemResult">
                <el-checkbox-button :label="item" :key="item" v-for="item in scope.row.questionItem">{{ item
                  }}</el-checkbox-button>
              </el-checkbox-group>
            </div>
            <div v-if="scope.row.itemType == 'writing'">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="scope.row.itemResult">
              </el-input>
            </div>
            <div v-if="scope.row.itemType == 'scoring'">
              <el-rate v-model="scope.row.itemResult" show-text> </el-rate>
            </div>
          </template>
</el-table-column>
<el-table-column prop="itemResult" width="300px" label="答案" align="center">
  {{ this.answer }}
</el-table-column> -->
      <!-- </jsbos-table> -->
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false"> 取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit('0')" v-if="!isDetail" :loading="btnLoading">
          暂 存</el-button>
        <el-button type="primary" @click="dataFormSubmit('1')" :loading="btnLoading" v-if="!isDetail">
          提 交</el-button>
      </span> -->
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { isEmpty } from "@/utils/isEmpty";
import { getOrderTypeList } from "../api";
export default {
  components: {},
  props: [],
  data() {
    return {
      continueWrite: undefined,
      btnLoading: false,
      title: "问卷",
      orderName: "",
      questionnaireId: "",
      questionnaireOrderRangeId: "",
      questionnaireOrderId: "",
      answer: [],
      visible: false,
      loading: false,
      isDetail: false,
      dataForm: [],
      orderTypeOptions: [],
      rules: {
        questionnaireName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
      enabledMarkOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    clearData(data) {
      for (let key in data) {
        if (data[key] instanceof Array) {
          data[key] = [];
        } else if (data[key] instanceof Object) {
          this.clearData(data[key]);
        } else {
          data[key] = "";
        }
      }
      this.dataForm.enabledMark = "1";
    },
    init(data) {
      console.log(data);
      this.orderName = data.orderName;
      this.dataForm.id = data.id || 0;
      this.visible = true;
      this.questionnaireOrderRangeId = data.questionnaireOrderRangeId;
      this.questionnaireOrderId = data.id;
      this.continueWrite = data.continueWrite;
      if (data.continueWrite) {
        let _query = {
          ...this.listQuery,
          questionnaireOrderRangeId: data.questionnaireOrderRangeId,
        };
        request({
          url: "/api/questionnaire/OqQuestionnaireOrderRangeItem/getList",
          method: "post",
          data: _query,
        }).then((res) => {
          if (res.hasOwnProperty("data")) {
            let _data = res.data.list;
            for (let i = 0; i < _data.length; i++) {
              if (_data[i].itemType == "multiSelect") {
                _data[i].itemResult = _data[i].itemResultArr;
              }
            }
            this.dataForm = _data;
          } else {
            this.dataForm = [];
          }
        });
      } else {
        request({
          url:
            "/api/questionnaire/OqQuestionnaireItem/getListByTemplateId/" +
            data.questionnaireId,
          method: "get",
        }).then((res) => {
          console.log(res);
          let _data = res.data;
          for (let i = 0; i < _data.length; i++) {
            if (_data[i].itemType == "multiSelect") {
              _data[i].itemResult = [];
            }
          }
          this.dataForm = res.data;

          this.loading = false;
        });
      }
    },
    // 表单提交
    dataFormSubmit(type) {
      console.log(this.dataForm);
      this.btnLoading = true;
      let flag = 0;
      this.dataForm.forEach((item) => {
        item.questionnaireOrderRangeId = this.questionnaireOrderRangeId;
        item.questionnaireOrderId = this.questionnaireOrderId;
        item.enabledMark = type;
        if (!this.continueWrite) {
          item.itemId = item.id;
        }
        if (isEmpty(item.itemResult)) {
          flag++;
        }
      });
      if (type == "1" && flag > 0) {
        this.btnLoading = false;
        this.$message({
          message: "请填写完所有题目再提交！",
          type: "warning",
        });
        return;
      }
      if (type == "0" && flag == this.dataForm.length) {
        this.btnLoading = false;
        this.$message({
          message: "请至少填写一道题目再暂存！",
          type: "warning",
        });
        return;
      }

      let _data = {
        data: this.dataForm,
      };
      request({
        url: "/api/questionnaire/OqQuestionnaireOrderRangeItem/createResult",
        method: "post",
        data: _data,
      }).then((res) => {
        this.btnLoading = false;
        this.$message({
          message: res.msg,
          type: "success",
          duration: 1000,
          onClose: () => {
            this.visible = false;
            this.$emit("refresh", true);
          },
        });
      });
    },
    request() {
      var _data = this.dataList();
      if (!this.dataForm.id) {
        _data.questionnaireId = _data.questionnaireName;
        if (!isEmpty(this.dataForm.orderStartAndEndDate)) {
          _data.orderStartDate = this.dataForm.orderStartAndEndDate[0];
          _data.orderEndDate = this.dataForm.orderStartAndEndDate[1];
        }
        request({
          url: "/api/questionnaire/OqQuestionnaireOrder",
          method: "post",
          data: _data,
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.visible = false;
              this.$emit("refresh", true);
            },
          });
        });
      } else {
        request({
          url: "/api/questionnaire/OqQuestionnaireOrder/" + this.dataForm.id,
          method: "PUT",
          data: _data,
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.visible = false;
              this.$emit("refresh", true);
            },
          });
        });
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      _data.orderRange = JSON.stringify(_data.orderRange);

      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.orderRange = JSON.parse(_dataAll.orderRange);
      this.dataForm = _dataAll;
    },
    goBack() {
      this.$emit("refresh");
    },
  },
};
</script>
<style scoped>
.centered-form {
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  align-items: center;
  /* 水平居中 */
}

.vertical-radio-group {
  display: flex;
  flex-direction: column;
  text-align: left;
  /* 设置为垂直方向 */
}

.custom-rate ::v-deep .el-rate__icon {
  font-size: 33px;
  /* 调整星星的大小 */
}
</style>
